<template>
  <view class="oa-content">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed customBack :bottomShadow="false" backgroundColor="#FFFFFF">
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left-arrow'></text>
      </view>
      <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
        <text class="tn-text-bold tn-text-xl tn-color-black">每日词条</text>
      </view>
    </tn-nav-bar>
    
    
    <view class="">
      
      <!-- 卡片轮播，图片均为凶姐本人照片，请勿将图片用于奇奇怪怪的地方，谢谢大佬们-->
      <view class="swiper" style="height:90vh;margin: 0 60rpx;" :style="{paddingTop: vuex_custom_bar_height + 50 +'px'}" @click="tn('/momentPages/king')">
        <tn-stack-swiper-card :list="list" direction="vertical" height="85%" :switchRate="20" :scaleRate="0.1" :translateRate="7.2" :opacityRate="20"></tn-stack-swiper-card>
        <!-- <tn-stack-swiper :list="list" direction="vertical" height="85%" :switchRate="20" :scaleRate="0.1" :translateRate="7.2" :opacityRate="20"></tn-stack-swiper> -->
      </view>
      
      
      <view class="" @click="tn('/momentPages/catalog')">
        词条目录  卡片式，学习那个板块才放   抖音互动+视频改为图片背景式\
      </view>
      
    </view>
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplateContent',
    mixins: [template_page_mixin],
    data(){
      return {
        //
        list: [
          {
            name: '不许凶我吖',
            sex: 'sex-female',
            color: 'red',
            age: '23',
            distance: '22.8',
            introduce: '晚风轻踩着云朵，月亮在贩售快乐',
            place: '浙江',
            cons: '双鱼座',
            job: 'UI设计',
            image: 'https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1683551116291-assets/web-upload/c4c0d31c-88ee-42c7-99ba-139ef206aaed.jpeg'
          },
          {
            name: '抓住那只猪',
            sex: 'sex-female',
            color: 'red',
            age: '24',
            distance: '16.2',
            introduce: '生活需要一些仪式感，这跟矫情无关',
            place: '广州',
            cons: '处女座',
            job: 'UE设计',
            image: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1671437658295-assets/web-upload/05620a1f-452e-4a14-9d30-f6c66ee4be1c.jpeg'
          },
          {
            name: '可我会像',
            sex: 'sex-male',
            color: 'blue',
            age: '26',
            distance: '12.9',
            introduce: '你从银河背后靠近我，我与星辉一同为你沉沦',
            place: '广州',
            cons: '水瓶座',
            job: '全栈开发',
            image: 'https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1664005699075-assets/web-upload/aaee3258-46b7-43ae-aaf2-02f3dff5f960.jpeg'
          }
        ],
        autoplay: false
      }
    },
    onReady() {
      this.$nextTick(() => {
        this.initSwiperContainer()
      })
    },
    onShow() {
      this.autoplay = true
    },
    onHide() {
      this.autoplay = false
    },
    methods: {
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
      
      // 初始化轮播图容器
      initSwiperContainer() {
        // 获取底部tabbar信息
        this._tGetRect('.tabbar').then((res) => {
          if (!res.height) {
            setTimeout(() => {
              this.initSwiperContainer()
            }, 10)
            return
          }
          // 获取系统信息
          const systemInfo = uni.getSystemInfoSync()
          this.swiperContainerHeight = systemInfo.safeArea.height - res.height - 10
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 60%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
  }
  
  .oa-content{
    max-width: 640px;
    margin: 0 auto;
    background-color: #F8F7F8;
    min-height: 100vh;
    padding-bottom: 60rpx;
    padding-bottom: calc(80rpx + env(safe-area-inset-bottom) / 2);
    padding-bottom: calc(80rpx + constant(safe-area-inset-bottom));
  }
  
  /* 卡片轮播图 start */
  .swiper {
    border-radius: 10rpx;
    overflow: hidden;
  }
  /* 轮播图 end */
</style>
